<template>
    <div style="width:100%;height:100%">
        <div id="map"></div>
        <pre id="coordinates" class="coordinates" ref="coordinates"></pre>
          <pre id="coordmark" class="coordmark" ref="coordmark"></pre>
    </div>
</template>
<script>
export default {
    data () {
        return {
            map:null,
            marker:null,
            canvas :undefined,
            geojson :undefined
        }
    },
    mounted(){
     this.init()
    },
    methods: {
        init(){
            this.smartmapx.mapbase = 'http://www.smartmapx.com';
            this.smartmapx.apikey = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1MzcxODM1OTgsImRhdGEiOiJ7XCJsb2dpbl9uYW1lXCI6XCJyb290XCIsXCJnZW5kZXJcIjoyLFwidXNlcl9pZFwiOlwiZm1fc3lzdGVtX3VzZXJfcm9vdFwiLFwidXNlcl9uYW1lXCI6XCJyb290XCIsXCJ1c2VyX29yaWdpbl9pZFwiOlwiZm1fbG9jYWxcIixcInByb2R1Y3RfaWRcIjpcIlwiLFwiZXhwaXJlX3RpbWVcIjpcIlwiLFwic291cmNlX2lkXCI6XCJcIixcInR5cGVcIjpcIlwiLFwiY29ycF9pZFwiOlwiZm1fc3lzdGVtX2NvcnBcIn0iLCJleHAiOjQwOTI1OTkzNDksImp0aSI6ImFfNjhmZjBhZGY5OTcxNDQ0NThjNzViZWFiN2FjNTkzYWYifQ.W122WkT6QR4HZWbpalkpmirV9JWkDYcCkmNZoxCB_z8';
             this.map = new this.smartmapx.Map({
            container: 'map',
            mapId: 'map_id_1',
            center: [116.39378152938205,39.90874276757861],
            zoom: 10
        });
            // 添加缩放条
            var nav = new this.smartmapx.NavigationControl();
            this.map.addControl(nav, 'top-right');

            // 添加比例尺
            this.map.addControl(new this.smartmapx.ScaleControl({
                maxWidth: 100,
                unit: 'm'
            }));
 
            this.canvas = this.map.getCanvasContainer();
 
            this.geojson = {
            'type': 'FeatureCollection',
            'features': [
            {
            'type': 'Feature',
            'geometry': {
                'type': 'Point',
                'coordinates': [116.38759530154772,39.91276876391635]
              }
             }
            ]
          };
            this.map.on('load',()=>{
                this.marker = new this.smartmapx.UnionMarker([116.27178152938205,40.03874276757861]);//新增添加marker方式， 原有方式继续支持
                this.marker.addTo(this.map);
                this.marker.enableDragging();
                var coordmark=this.$refs.coordmark;
                this.marker.on("dragend",()=>{
                    var lngLat = this.marker.getLngLat();
                        coordmark.style.display = 'block';
                        coordmark.innerHTML =
                        'Longitude: ' + lngLat.lng + '<br />Latitude: ' + lngLat.lat;
                })
                this.map.addSource('point', {
                    'type': 'geojson',
                    'data': this.geojson
                    });
                    
                this.map.addLayer({
                    'id': 'point',
                    'type': 'circle',
                    'source': 'point',
                    'paint': {
                    'circle-radius': 10,
                    'circle-color': 'red'
                        }
                    })

                this.map.on('mouseenter', 'point', ()=> {
                    this.map.setPaintProperty('point', 'circle-color', '#3bb2d0');
                    this.canvas.style.cursor = 'move';
                    });
                    
                    this.map.on('mouseleave', 'point', (e)=> {
                    this.map.setPaintProperty('point', 'circle-color', '#3887be');
                    this.canvas.style.cursor = '';
                    });
                    
                    this.map.on('mousedown', 'point', (e)=> {
                        //    console.log(e)
                    // Prevent the default map drag behavior.
                    // e.preventDefault();
                    this.map.dragPan.disable();
                    this.canvas.style.cursor = 'grab';
                    
                    this.map.on('mousemove', this.onMove);
                    this.map.once('mouseup', this.onUp);
                    });
                    
                    this.map.on('touchstart', 'point', (e)=> {
                    if (e.points.length !== 1) return;
                    // console.log(e)
                    // Prevent the default map drag behavior.
                    // e.preventDefault();
                    this.map.dragPan.disable();
                    this.map.on('touchmove', this.onMove);
                    this.map.once('touchend', this.onUp);
                    });
            })
        },
        onMove(e) {
        var coords = e.lngLat;
        // Set a UI indicator for dragging.
        this.canvas.style.cursor = 'grabbing';
        
        // Update the Point feature in `geojson` coordinates
        // and call setData to the source layer `point` on it.
        this.geojson.features[0].geometry.coordinates = [coords.lng, coords.lat];
        this.map.getSource('point').setData(this.geojson);
        },

        onUp(e) {
            var coords = e.lngLat;
            
            // Print the coordinates of where the point had
            // finished being dragged to on the map.
            var coordinates=this.$refs.coordinates;
            coordinates.style.display = 'block';
            coordinates.innerHTML =
            'Longitude: ' + coords.lng + '<br />Latitude: ' + coords.lat;
            this.canvas.style.cursor = '';
            
            // Unbind mouse/touch events
            this.map.off('mousemove', this.onMove);
            this.map.off('touchmove', this.onMove);
            // var kk=this.map.dragPan.isEnabled();
            // var gg=this.map.dragPan.isActive();
            // this.map.dragPan.isEnabled();
            // this.map.dragPan.isActive();
            // console.log(gg)
            // console.log(kk)
            this.map.dragPan.enable();
        },
    }
}
</script>
<style scoped>
#map{
    width:100%;
    height:100%
}
.coordinates {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    position: absolute;
    bottom: 70px;
    left: 10px;
    padding: 5px 10px;
    margin: 0;
    font-size: 11px;
    line-height: 18px;
    border-radius: 3px;
    display: none;
}
.coordmark{
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    position: absolute;
    bottom: 140px;
    left: 10px;
    padding: 5px 10px;
    margin: 0;
    font-size: 11px;
    line-height: 18px;
    border-radius: 3px;
    display: none;
}
</style>